{% extends "layout.html" %}
{% block content %}
    <style>
    a {
        color: black!important;
    }
    span{
        color: black!important;
    }
    .background-color{
          background-color: rgba(255, 255, 255, 0.5);
      }
    </style>
    <div class="container background-color">
        <div class="panel panel-default">
            <div class="panel-heading">
                <span class="glyphicon glyphicon-th-list" aria-hidden="true"></span>
                传感器数据
                <ul class="nav">
                    <li class="region">
                        <a href="#"  data-toggle="dropdown" role="button" aria-haspopup="true"
                           aria-expanded="false"  >选择地区 <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="{% url 'datadisplay' '北京' %}">北京</a></li>
                            <li><a href="{% url 'datadisplay' '厦门' %}">厦门</a></li>
                            <li><a href="{% url 'datadisplay' '福州' %}">福州</a></li>
                            <li><a href="{% url 'datadisplay' '泉州' %}">泉州</a></li>
                        </ul>
                    </li>
                </ul>
            </div>

            <table class="table table-bordered">
                <thead>
                <tr>
                    <th>日期</th>
                    <th>温度</th>
                    <th>二氧化碳</th>
                    <th>光照强度</th>
                    <th>土壤湿度</th>
                    <th>湿度</th>
                </tr>
                </thead>
                <tbody>
                {% for obj in list %}
                    <tr>
                        <td>{{ obj.time }}</td>
                        <td>{{ obj.temperature }}</td>
                        <td>{{ obj.co2}}</td>
                        <td>{{ obj.luminance }}</td>
                        <td>{{ obj.soi_humidity}}</td>
                        <td>{{obj.humidity }}</td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
{% endblock %}